<div class="page">
  <header class="bar bar-nav fs-header-small">
    <a data-dismiss="push" class="icon icon-left pull-left"></a>
    <h1 class="title">课程预约</h1>
  </header>

  <div class="content">
    <form class="coach-form" action="{{CTX.root}}/profile/courses/{{roundId}}/appointment?scheduleId={{scheduleId}}" method="POST">
      <input type="hidden" name="roundId" value="{{roundId}}">
      <input type="hidden" name="siteId" value="{{siteId}}">
      <input type="hidden" name="day" value="{{day}}">
      <input type="hidden" name="hour" value="{{hour}}">

      <div style="background-color: #fff;">
        <p class="text-center" style="padding: .35rem; margin: 0;">{{day}}&nbsp;&nbsp;{{hour}}</p>
      </div>

      <div class="list-block area-wrap
      	{{#equal commonRemain 0}} hide {{/equal}}
      	{{#equal roomRemain 0}} hide {{/equal}}
      	">
        <div class="row no-gutter">
          <div class="col-50" style="border-right: 1px solid #999999;">
            <div class="area-select">
              <div class="private area"></div>
              {{#equal commonRemain 0}}
                <span>已&nbsp;满 </span>
              {{else}}
                <span>剩余{{roomRemain}}</span>
              {{/equal}}
              <input type="radio" name="areaType" value="room" class="hide {{#equal roomRemain 0}} unchecked {{/equal}}">
            </div>
          </div>
          <div class="col-50">
            <div class="area-select">
              <div class="public area"></div>
              {{#equal roomRemain 0}}
                <span>已&nbsp;满</small>
              {{else}}
                <span>剩余{{commonRemain}}</span>
              {{/equal}}
              <input type="radio" name="areaType" value="common" class="hide {{#equal commonRemain 0}} unchecked {{/equal}}">
            </div>
          </div>
        </div>
      </div>

      <div class="list-block course-booking">
        <ul>
          {{#each coaches}}
             {{#equal status "可预约"}}
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="{{../CTX.cdn}}/{{principal.profile.avatar}}-appointavatar"></div>
                  <div class="item-inner">
                    <div class="item-title">
                      <p class="name">
                        {{principal.name}} 
                      </p>
                      <p class="description">
                        {{#each principal.profile.specialtyArray}}
                          <span class="coach-specilty coach-specilty-{{@index}}">{{this}}</span>
                        {{/each}}
                      </p>
                    </div>
                    <div class="item-after" style="padding: 1px 0;">
                      <a href="javascript: void(0);" data-coach="{{principal.id}}" class="button active-button">{{status}}</a>
                    </div>
                  </div>
                </div>
                <input type="radio" name="coachId" value="{{principal.id}}" style="display:none;">
              </li>
            {{/equal}}
          {{/each}}
          {{#each coaches}}
             {{#equal status "可预约"}}
             {{else}}
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="{{../CTX.cdn}}/{{principal.profile.avatar}}-appointavatar"></div>
                  <div class="item-inner">
                    <div class="item-title">
                      <p class="name">
                        {{principal.name}} 
                        <span style="font-size: .6rem; padding: 2px .25rem; color: #FE4141; border-radius: .25rem; border: 1px solid #FE4141;">该时间有课</span>
                      </p>
                      <p class="description"><span style="font-weight: 600;">擅长</span>&nbsp;&nbsp;
                        {{#each principal.profile.specialtyArray}}
                          <span class="coach-specilty">{{this}}</span>
                        {{/each}}
                      </p>
                    </div>
                    <div class="item-after" style="padding: 1px 0;">
                      <a href="#coach-appointment" data-coach="{{principal.id}}" class="button">其他时间</a>
                    </div>
                  </div>
                </div>
                <input type="radio" name="coachId" value="{{principal.id}}" style="display:none;">
              </li>
            {{/equal}}
          {{/each}}
          
        </ul>
      </div>
    </form>
    <div class="submit-fixed clearfix" style="display: none;">{{day}}&nbsp;&nbsp;{{hour}}<button id="submit" class="button button-fill"  style="float:right;background-color: #333; color: #FFDE00; display: inline-block;">确认</button></div>
  </div>
</div>
